import { Component } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import RenderDescription, {
    type DescItemDto
} from '@/components/render-descriotion/Index'
import ToolTipText from '@/components/tooltip-text/Index'
import DrawMoneyPop from './components/DrawMoneyPop'
import QuotaPop from './components/QuotaPop'
import { Button } from 'ant-design-vue'
import RechargePop from './components/RechartgePop'
@Component
export class BasicInfoView extends Render {
    showDrawMoney = false
    showQuota = false
    showRecharge = false
    get insuranceInfoData() {
        return [
            {
                label: '账户余额：',
                value: '',
                slot: () => {
                    return <div class="flex items-center w-full justify-between">
                        <div>￥1000</div>
                        <div>
                            <Button type="link" onClick={() => {
                                this.showDrawMoney = true
                            }}>提现</Button>
                            <Button type="link" onClick={() => {
                                this.showRecharge = true
                            }}>充值</Button>
                        </div>
                    </div>
                },
                // slotSuffix: ()=>{
                //     return <div class="flex items-center">
                //         <div class="mr-4 cursor-pointer" onClick={() => {
                //             this.showDrawMoney = true
                //         }}>提现</div>
                //         <div class="cursor-pointer">充值</div>
                //     </div>
                // }
            },
            {
                label: '收款渠道：',
                value: '苏州蓝豚',
            },
            {
                label: '收款账户：',
                value: '蓝豚',
            },
            {
                label: '返利：',
                value: '返利中',
            },
            {
                label: '归属销售：',
                value: '',
                slot: () => { 
                    return <ToolTipText text="曹海玲" content="1311111111" />
                }
            },
            {
                label: '年龄限制：',
                value: '4',
            }, {
                label: '可欠费总额：',
                slot: () => {
                    return <div class="flex items-center">
                        <div>￥0.00</div>
                        <Button type='link' onClick={() => {
                            this.showQuota = true
                        }}>设置</Button>
                    </div>
                }
            }
        ] as DescItemDto[]
		
    }
	
    get blacklistInfoData() {
        return [
            {
                label: '出险人员：',
                value: '',
            },
            {
                label: '录入原因：',
                value: '返利中',
            },
            {
                label: '附件：',
                value: '123',
                span:2
            }
        ] as DescItemDto[]
    }
	
    get systemInfoData() {
        return [
            {
                label: '派遣单位：',
                value: '',
            },
            {
                label: '有效方案：',
                value: '返利中',
            },
            {
                label: '案件总数：',
                value: '嘎嘎有下划线',
            },
            {
                label: '理赔率：',
                value: '',
                slot: () => { 
                    return <div class="text-green">12%</div>
                }

            },
            {
                label: '累积充值：',
                value: '嘎嘎有下划线',
            },
            {
                label: '在保人数：',
                value: '嘎嘎有下划线',
            },
            {
                label: '开通人：',
                value: '',
                slot: () => { 
                    return <ToolTipText text="范小胖" content="1311111111" />
                }

            },
            {
                label: '建档时间：',
                value: '嘎嘎有下划线',
            },
            {
                label: '累计充值：',
                value: '嘎嘎有下划线',
            },
            {
                label: '最近更新人：',
                value: '',
                slot: () => { 
                    return <ToolTipText text="刘洋" content="1311111111" />
                }
            },
            {
                label: '最近更新时间：',
                value: '嘎嘎有下划线',
            },
            {
                label: '在保人次：',
                value: '嘎嘎有下划线',
            }
        ] as DescItemDto[]
    }
    render() { 
        return (
            <>
                <div class="text-black-200 text-lg font-semibold mb-16 mt-20">保险资料</div>
                <div>
                    <RenderDescription class="mt-20" renderData={this.insuranceInfoData} row={2} />
                </div>
                <div class="text-black-200 text-lg font-semibold mb-16 mt-20">黑名单信息</div>
                <div>
                    <RenderDescription class="mt-20" renderData={this.blacklistInfoData} row={2} />
                </div>
                <div class="text-black-200 text-lg font-semibold mb-16 mt-20">系统信息</div>
                <div>
                    <RenderDescription class="mt-20" renderData={this.systemInfoData} row={2} />
                </div>
                <DrawMoneyPop
                    v-model:show={this.showDrawMoney}
                />
                <RechargePop v-model:show={this.showRecharge} />
                <QuotaPop
                    v-model:show={this.showQuota}
                />
            </>
        )
    }
	
}

export default toNative<{}, {}>(BasicInfoView)